<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <title>套餐管理</title>
    <base href="<%=basePath %>"/>
    <link rel="stylesheet" href="assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="assets/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="assets/layui/css/layui.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.validator.min.js"></script>
    <script src="assets/layui/layui.all.js"></script>
    <script type="text/javascript" src="assets/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="assets/js/jquery.ztree.excheck.js"></script>

</head>

<div class="container">
    <div class="col-lg-10 col-lg-offset-1">
        <div class="panel-body">
            <form id="selectComdo" class="form-horizontal">
                <div class="panel-body">
                    生效时间：<input type="text" class="date form-group-lg" id="date1"
                                name="startDate">
                    至 <input type="text" class="date form-group-sm" id="date2"
                             name="endDate">
                    套餐名：<input calss="form-group-sm input" type="text" name="comboName">
                    <a class="btn-primary btn-sm" onclick="comboSelect(1)">搜索</a>
                </div>
            </form>
        </div>


        <div>
            <table class="table table-hover table-bordered <%--table table-border table-bordered table-hover table-bg table-sort--%>">
                <thead>
                <tr class="text-c">
                    <%--<th width="40"><input name="" type="checkbox" value=""></th>--%>
                    <th width="80" style="text-align: center">套餐名</th>
                    <th width="100" style="text-align: center">价格</th>
                    <th width="100" style="text-align: center">开始时间</th>
                    <th width="100" style="text-align: center">结束时间</th>
                    <th width="100" style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody style="text-align: center" id="comboTbody">
                <tr class="text-c">
                    <td colspan="5">
                        加载中。。。
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="float: left">
            <a class="btn-primary btn-sm" data-toggle='modal' data-target='#addModal' onclick="getDesks()">新增套餐</a>
        </div>
        <div id="page" style="float: right">
            总共1页，当前第1页，一页5行，总共0行。
            <a class="btn-sm btn-primary" onclick="comboSelect(1)">上一页</a>
            <a class="btn-sm btn-primary" onclick="comboSelect(1)">下一页</a>
        </div>
    </div>
    <div class="modal fade" id="modal">
        <div class="modal-dialog" style="width: 600px">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header" style="text-align: center">
                    <label id="comboTitol">套餐详情</label>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" id="modalBody">
                    <div>
                        <table class="table table-hover table-bordered<%--table table-hover--%> <%--table table-border table-bordered table-hover table-bg table-sort--%>">
                            <thead>
                            <tr class="text-c">
                                <th width="80" style="text-align: center">项目名</th>
                                <th width="100" style="text-align: center">所属科室</th>
                                <th width="100" style="text-align: center">价格</th>
                            </tr>
                            </thead>
                            <tbody style="text-align: center" id="itemTbody">
                            <tr class="text-c">
                                <td colspan="3">
                                    加载中。。。
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModal">
        <div class="modal-dialog" style="width: 600px">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header" style="text-align: center">
                    <label>新增套餐</label>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" style="overflow:auto">
                    <form id="comboForm">
                        <div style="float: left">
                            <table>
                                <tr>
                                    <td style="text-align: right">套餐名：</td>
                                    <td><input class="form-control" type="text" name="comboName" id="comboName" onblur="nonEmpty(this.id,'套餐名')"></td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">价格：</td>
                                    <td><input class="form-control" type="text" name="comboMoney" id="comboMoney" oninput="value=value.replace(/[^\d]/g,'')" onblur="nonEmpty(this.id,'价格')"></td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">起始时间：</td>
                                    <td><input class="form-control" type="text" class="date form-group-lg layui-input" id="date3"
                                               name="beginTime" onchange="nonEmpty(this.id,'生效起始时间')"></td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">失效时间：</td>
                                    <td><input class="form-control" type="text" class="date form-group-sm layui-input" id="date4"
                                               name="finishTime" onchange="nonEmpty(this.id,'生效结束时间')"></td>
                                </tr>
                            </table>
                        </div>
                        <div style="float: left">
                            选择项目
                            <div class="zTreeDemoBackground left">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div id="itemList">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--<div id="barcode">--%>
    <%--<img class="imgsss" src="barcode/7.png"/>--%>
<%--</div>--%>
<script>
    $(document).ready(function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            var date1 = laydate.render({
                elem:'#date1',
                done:function (value,date) {
                    if(value !=''){
                        date.month = date.month-1;
                        date2.config.min = date;
                    }
                }
            });

            var date2 = laydate.render({
                elem:'#date2',
                done:function (value,date) {
                    if(value !=''){
                        date.month = date.month-1;
                        date1.config.max = date;
                    }
                }
            });

            var date3 = laydate.render({
                elem:'#date3',
                min:0,
                done:function (value,date) {
                    if(value !=''){
                        date.month = date.month-1;
                        date4.config.min = date;
                    }
                }
            });

            var date4 = laydate.render({
                elem:'#date4',
                done:function (value,date) {
                    if(value !=''){
                        date.month = date.month-1;
                        date3.config.max = date;
                    }
                }
            });

            //执行一个laydate实例
            // laydate.render({
            //     elem: '#date1',//指定元素
            // });
            // //执行一个laydate实例
            // laydate.render({
            //     elem: '#date2'//指定元素
            // });
            //执行一个laydate实例
            // laydate.render({
            //     elem: '#date3'//指定元素
            // });
            // //执行一个laydate实例
            // laydate.render({
            //     elem: '#date4'//指定元素
            // });
        });
        comboSelect(1);
        bar(7);

        $("#nocheckTrue").bind("click", {nocheck: true}, nocheckNode);
        $("#nocheckFalse").bind("click", {nocheck: false}, nocheckNode);
    });



    //查找套餐列表(分页)
    function comboSelect(pageNum) {
        if (pageNum > 0) {
            $.post('combo/getCombos.action?pageNum=' + pageNum,
                $('#selectComdo').serialize(),
                function (combos) {
                    if (combos.list.length == 0) {
                        $('#comboTbody').html(null);
                        $('#comboTbody').append(
                            "<tr>" +
                            "<td colspan='5'>没有符合条件的数据</td>" +
                            "</tr>"
                        );
                    } else {
                        $('#comboTbody').html(null);
                        combos.list.forEach(function (v) {
                            $('#comboTbody').append(
                                "<tr>" +
                                // "<td><input name='1' type='checkbox' value='0'></td>" +
                                "<td>" + v.comboName + "</td>" +
                                "<td>" + v.comboMoney + "</td>" +
                                "<td>" + v.beginTime + "</td>" +
                                "<td>" + v.finishTime + "</td>" +
                                "<td>" +
                                "<a class='btn-primary btn-sm' data-toggle='modal' data-target='#modal' onclick='details(" + v.comboId + ")'>详情</a> " +
                                "<a class='btn-primary btn-sm' onclick='delCombo(" + v.comboId + "," + combos.pageNum + ")'>删除</a>" +
                                "</td>" +
                                "</tr>"
                            )
                        });
                        $('#page').html(null);
                        $('#page').append("总共" + combos.pages + "页，当前第" + combos.pageNum + "页，一页" + combos.pageSize + "行，总共" + combos.total + "行。");
                        $('#page').append("<a class='btn-sm btn-primary' onclick='comboSelect(" + combos.prePage + ")'>上一页</a> ");
                        $('#page').append("<a class='btn-sm btn-primary' onclick='comboSelect(" + combos.nextPage + ")'>下一页</a>");

                    }
                }
            )
        }
    }

    //参看套餐详情
    function details(comboId) {
        $.post('combo/getCombo.action?comboId=' + comboId,
            function (combo) {
                $('#comboTitol').html(null);
                $('#comboTitol').append("套餐：" + combo.comboName + "");
                if (combo.items.length == 0) {
                    $('#itemTbody').html(null);
                    $('#itemTbody').append(
                        "<tr>" +
                        "<td colspan='3'>没有项目或项目已删除</td>" +
                        "</tr>"
                    );
                } else {
                    $('#itemTbody').html(null);
                    combo.items.forEach(function (v) {
                            $('#itemTbody').append(
                                "<tr>" +
                                "<td>" + v.itemName + "</td>" +
                                "<td>" + v.desk.deskName + "</td>" +
                                "<td>" + v.itemMoney + "</td>" +
                                "</tr>"
                            )
                        }
                    )
                }
            })
    }

    //删除套餐
    function delCombo(comboId, pageNum) {
        if (confirm("确认删除?")){
            $.post('combo/delCombo.action?comboId=' + comboId,
                function (str) {
                    if (str) {
                        alert("套餐删除成功！");
                    }else {
                        alert("套餐删除失败！");
                    }
                    comboSelect(pageNum);
                }
            )
        }
    }


    //树形参数
    var setting = {

        check: {
            enable: true,
            nocheckInherit: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    function nocheckNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nocheck = e.data.nocheck,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个节点");
        }

        for (var i=0, l=nodes.length; i<l; i++) {
            nodes[i].nocheck = nocheck;
            zTree.updateNode(nodes[i]);
        }
    }


    //查询科室列表
    function getDesks() {
        $('#itemList').html(null);
        $.post('desk/getDeskTree.action',
            function (data) {
            console.log(data);
                $.fn.zTree.init($("#treeDemo"), setting, data);
                $('#itemList').append(
                    "<a class='btn-primary btn-sm' style='float: right' onclick='addCombo(1)'>添加套餐</a>"
                );
            }
        )
    }

    //新增套餐
    function addCombo(pageNum) {
        if (nonEmpty('comboName','套餐名')) {
            if (nonEmpty('comboMoney','价格')) {
                if (nonEmpty('date3','起始时间')){
                    if (nonEmpty('date4','结束时间')){
                        var checkedObjs = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);
                        if (checkedObjs.length<1) {
                            alert('请选择项目!');
                        }else{
                            //将选中的值放到input中传到后台
                            $("#comboForm input[name='itemIds']").remove();
                            console.log(checkedObjs);
                            for(var i=0;i<checkedObjs.length;i++) {
                                var obj = checkedObjs[i];
                                if (obj.pId!=null) {
                                    console.log(obj.pId);
                                    $("#comboForm").append("<input type='hidden' name='itemIds' value='"+obj.id+"' >");  //在form里增加input，将字符串数组传到后台
                                }
                            }
                            $.post('combo/addCombo.action',
                                $('#comboForm').serialize(),
                                function (state) {
                                    if (state) {
                                        alert("套餐添加成功！");
                                    }else {
                                        alert("套餐添加失败！");
                                    }
                                    comboSelect(pageNum);
                                }
                            );
                        }
                    }
                }
            }
        }
    }
    //生成条形码
    function bar(reportId) {
        $.post('combo/barcode.action',
            {'reportId': reportId},
            function (a) {
            }
        )
    }

    //前端非空验证（标签ID，提示语）
    function nonEmpty(input, tips) {
        var inputval = $("#" + input).val();
        if (!inputval) {
            layer.tips('请输入'+tips+'!', '#' + input, {tips: [2, '#CC3333']});
            return false;
        }
        return true;
    }


</script>
</body>
</html>